<ion-view id="bitpayCard" show-tabs>
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>BitPay Visa<sup>&reg;</sup> Card ({{bitpayCard.lastFourDigits}})</ion-nav-title>
  </ion-nav-bar>

  <ion-content>

    <div class="box-notification warning m0" ng-show="network == 'testnet'">
      Sandbox version. Only for testing purpose
    </div>

    <div class="amount-wrapper" ng-show="!error">
      <div class="amount-bg"></div>
      <div class="amount">
        <div ng-if="bitpayCard.balance" ng-click="bitpayCard.update()">
          <div class="amount__balance">{{bitpayCard.balance | currency:bitpayCard.currencySymbol:2 }}</div>

          <div class="size-12 m5r" ng-if="bitpayCard.updatedOn">
            {{bitpayCard.updatedOn  * 1000 | amTimeAgo}}
          </div>

          <a class="button button-primary button-small m5t size-14"
            style="padding: 0.5em 1em;"
            ui-sref="tabs.bitpayCard.amount({nextStep: 'tabs.bitpayCard.topup', currency: bitpayCard.currency})" no-low-fee>
            <i class="icon ion-plus m10r" style="vertical-align: baseline;"></i>
            {{'Add Funds'|translate}}
          </a>
        </div>
        <div ng-if="!bitpayCard.balance" class="m10t">
          <strong class="size-36">...</strong>
        </div>
      </div>

      <div class="wallet-details-wallet-info">
        <ion-spinner class="spinner-dark recent right" icon="crescent" ng-show="loadingHistory"  ></ion-spinner>
      </div>
    </div>

    <div ng-show="error" class="text-center m10t assertive">
      {{error}}
    </div>

    <div
      class="text-center padding get-started"
      ng-show="bitpayCard.getStarted">
      <i class="icon ion-ios-arrow-thin-up get-started__arrow"></i>
      <h1 translate>Get started</h1>
      <div class="get-started__text" translate>
        Your BitPay Card is ready. Add funds to your card to start using it at stores and ATMs worldwide.
      </div>
    </div>
    <div class="list" ng-show="!bitpayCard.getStarted">
      <label class="item item-input item-select activity-header">
        <div class="input-label" translate>
          Activity
        </div>
        <select ng-model="dateRange.value" ng-change="bitpayCard.update()">
          <option value="last30Days" selected translate>Recent</option>
          <option value="lastMonth" translate>Last Month</option>
          <option value="all" translate>All</option>
        </select>
      </label>
      <div ng-if="bitpayCard.bitpayCardTransactionHistoryConfirming[0]">
        <label class="item status-label" ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-do-you-require-one-blockchain-confirmation-for-bitpay-card-loads')">
          <div>
            <span translate>Confirming</span>
            <i class="icon">
              <img src="img/icon-help-support.svg" class="bg"/>
            </i>
          </div>
        </label>
        <div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryConfirming">
          <span ng-include="'views/includes/cardActivity.html'"></span>
        </div>
      </div>
      <div ng-if="bitpayCard.bitpayCardTransactionHistoryPreAuth[0]">
        <label class="item status-label" ng-click="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-was-i-overcharged-on-my-bitpay-card-account-why-is-there-a-hold-on-my-account')">
          <div>
            <span translate>Pre-Auth Holds</span>
            <i class="icon">
              <img src="img/icon-help-support.svg" class="bg"/>
            </i>
          </div>
        </label>
        <div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryPreAuth">
          <span ng-include="'views/includes/cardActivity.html'"></span>
        </div>
      </div>
      <div ng-if="bitpayCard.bitpayCardTransactionHistoryCompleted[0]">
        <label class="item status-label" ng-if="bitpayCard.bitpayCardTransactionHistoryPreAuth[0] || bitpayCard.bitpayCardTransactionHistoryConfirming[0]">
          <div translate>
            Completed
          </div>
        </label>
        <div ng-repeat="tx in bitpayCard.bitpayCardTransactionHistoryCompleted">
          <span ng-include="'views/includes/cardActivity.html'"></span>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>
